<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务信息</span>
      </div>
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="服务名">{{ detail.service_name }}</el-descriptions-item>
        <el-descriptions-item label="业务线">{{ detail.business_name }}</el-descriptions-item>
        <el-descriptions-item label="环境">{{ detail.env_name }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>容器信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="fetchPods()">刷新</el-button>
      </div>
      <el-table
        :data="podData"
        border
      >
        <el-table-column
          fixed
          prop="name"
          label="容器"
        />
        <el-table-column
          fixed
          prop="pod_ip"
          label="容器IP"
        />
        <el-table-column
          fixed
          prop="image_tag"
          label="版本"
        />
        <el-table-column
          prop="status"
          label="状态"
        />
        <el-table-column
          prop="restart_count"
          label="重启次数"
        />
        <el-table-column
          prop="start_age"
          label="Age"
        />
        <el-table-column
          prop="redeploy_timestamp"
          label="重启时间戳"
        />

      </el-table>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>流程信息</span>
      </div>
      <el-steps :active="active" finish-status="success">
        <el-step v-for="item in stepData.steps" :key="item.step" :title="item.step_name" :description="item.opuser" />
      </el-steps>

      <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
      <el-button v-for="item in stepData.buttons" :key="item.name" :disabled="item.disable" @click="next(item)">{{ item.name }}</el-button>
    </el-card>
  </div>

</template>
<script>
import { getPods, getSteps, doStep, getDetail } from '@/api/flow/deploy'
export default {
  data() {
    return {
      // pod定时器
      podtimer: 0,
      // step定时器
      steptimer: 0,
      podData: [],
      detail: {},
      active: 0,
      current_opuser: '',
      current_step: '',
      status: 'wait',
      stepData: {
        steps: [],
        buttons: []
      },
      workorder: this.$route.query.id
    }
  },

  created() {
    this.fetchData()
  },
  beforeDestroy() {
    clearInterval(this.podtimer)
    clearInterval(this.steptimer)
  },
  // mounted() {
  //   this.timer = setInterval(this.fetchPods, 5000)
  // },
  methods: {
    fetchData() {
      this.fehchDetail()
      this.fetchPods()
      this.fetchSteps()
    },
    fetchPods() {
      getPods({ id: this.workorder }).then(response => {
        this.podData = response
      })
    },
    fehchDetail() {
      getDetail({ id: this.workorder }).then(response => {
        this.detail = response.data
      })
    },
    fetchSteps() {
      this.stepData.steps = []
      this.stepData.buttons = []
      getSteps({ id: this.workorder }).then(response => {
        this.stepData.steps = response.data.steps
        this.stepData.buttons = response.data.buttons
        this.active = response.active
        this.status = response.status
        this.current_opuser = response.current_opuser
        this.current_step = response.current_step
        this.watchStep()
      })
    },
    watchStep() {
      console.log(this.active, this.status)
      if (this.current_opuser === 'auto' & this.status === 'wait') {
        console.log('watch')
        this.steptimer = setInterval(this.checkAuto, 10000)
        this.podtimer = setInterval(this.fetchPods, 15000)
      }
    },

    checkAuto() {
      doStep({ 'id': this.workorder, 'step': this.current_step, 'action': 'yes' }).then(
        response => {
          if (response.step_status === 'finish') {
            this.fetchSteps()
            clearInterval(this.steptimer)
            setTimeout(clearInterval(this.podtimer), 20000)
          }
        }
      )
    },
    next(item) {
      console.log(item)

      doStep({ 'id': this.workorder, 'step': item.step_function, 'action': item.action }).then(
        response => {
          this.fetchSteps()
        }
      )
    }
  }
}
</script>

<style>

</style>
